<!DOCTYPE HTML>
<html lang="zh-CN">

<head><meta name="generator" content="Hexo 3.9.0">
    <!--Setting-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="apple-mobile-web-app-capable" content="ydong博客">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,adress=no">
    <meta name="browsermode" content="application">
    <meta name="screen-orientation" content="portrait">
    <meta name="theme-version" content="1.2.3">
    <meta name="root" content="/blog/">
    <link rel="dns-prefetch" href="http://ydongabc.gitee.io/blog">
    <!--SEO-->

<meta name="keywords" content="vue-cli脚手架">


<meta name="description" content="Vue-CLI是Vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，并带有合理的默认配置，用于快速启动新项目的开发。可使用GUI图形化界面进行项目的创建与管理：执行命令 $...">


<meta name="robots" content="all">
<meta name="google" content="all">
<meta name="googlebot" content="all">
<meta name="verify" content="all">
    <!--Title-->

<title>
    
    vue-cli脚手架的基本命令和使用 |
    
    ydong博客
</title>

<link rel="alternate" href="/atom.xml" title="ydong博客" type="application/atom+xml">


<link rel="icon" href="./favicon.ico">

    

<link rel="stylesheet" href="/blog/css/bootstrap.min.css?rev=3.3.7">
<link rel="stylesheet" href="/blog/css/font-awesome.min.css?rev=4.7.0">
<link rel="stylesheet" href="/blog/css/style.css?rev=@@hash">
    
<div class="hide">
    <script type="text/javascript">
    var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    document.write(unescape("%3Cspan class='cnzz_stat_icon_1263868967 hide' %3E%3Cscript%20src%3D%22https%3A%2F%2Fs95.cnzz.com%2Fz_stat.php%3Fweb_id%3D1272564536%22%3E%3C%2Fscript%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1263868967%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));
    </script>
</div>




    

</head></html>
<!--[if lte IE 8]>
<style>
    html{ font-size: 1em }
</style>
<![endif]-->
<!--[if lte IE 9]>
<div style="ie">你使用的浏览器版本过低，为了你更好的阅读体验，请更新浏览器的版本或者使用其他现代浏览器，比如Chrome、Firefox、Safari等。</div>
<![endif]-->
<body>
    <header class="main-header"  style="background-image:url(
    /blog/./img/banner.jpg)"
     >
    <div class="main-header-box">
        <a class="header-avatar" href="/" title='John Doe'>
            <img src="/blog/img/avatar.jpg" alt="logo头像" class="img-responsive center-block">
        </a>
        <div class="branding">
            <!--<h2 class="text-hide">Snippet主题,从未如此简单有趣</h2>-->
            
            <img src="/blog/img/branding.png" alt="Snippet 博客主题" class="img-responsive center-block">
            
        </div>
    </div>
</header>
    <nav class="main-navigation">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="navbar-header"><span class="nav-toggle-button collapsed pull-right" data-toggle="collapse" data-target="#main-menu" id="mnav">
                        <span class="sr-only"></span>
                        <i class="fa fa-bars"></i>
                    </span>
                    <a class="navbar-brand" href="http://ydongabc.gitee.io/blog">
                        ydong博客</a>
                </div>
                <div class="collapse navbar-collapse" id="main-menu">
                    <ul class="menu">
                        
                        <li role="presentation" class="text-center">
                            <a href="/blog"><i class="fa "></i>
                                首页</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/blog/categories/前端/"><i class="fa "></i>
                                前端</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/blog/categories/后端/"><i class="fa "></i>
                                后端</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/blog/categories/工具/"><i class="fa "></i>
                                工具</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/blog/archives/"><i class="fa "></i>
                                时间轴</a>
                        </li>
                        
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>
    <section class="content-wrap">
        <div class="container">
            <div class="row">
                <main class="col-md-8 main-content m-post">
                    <p id="process"></p>
<article class="post">
    <div class="post-head">
        <h1 id="vue-cli脚手架的基本命令和使用">
            
            vue-cli脚手架的基本命令和使用
            
        </h1>
        <div class="post-meta">
    
    <span class="categories-meta fa-wrap">
        <i class="fa fa-folder-open-o"></i>
        <a class="category-link" href="/blog/categories/工具/">工具</a> <a class="category-link" href="/blog/categories/工具/vue-cli/">vue-cli</a>
    </span>
    
    
    <span class="fa-wrap">
        <i class="fa fa-tags"></i>
        <span class="tags-meta">
            
            <a class="tag-link" href="/blog/tags/vue-cli脚手架/">vue-cli脚手架</a>
            
        </span>
    </span>
    
    
    
    <span class="fa-wrap">
        <i class="fa fa-clock-o"></i>
        <span class="date-meta">
            2019/09/26</span>
    </span>
    
    
</div>
        
        
    </div>
    
    <div class="post-body post-content">
        <p>Vue-CLI是Vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，并带有合理的默认配置，用于快速启动新项目的开发<a id="more"></a>。<br>可使用GUI图形化界面进行项目的创建与管理：执行命令 <code>$ vue ui</code> </p>
<h2 id="vue-cli-3-0版本"><a href="#vue-cli-3-0版本" class="headerlink" title="vue-cli 3.0版本"></a><strong>vue-cli 3.0版本</strong></h2><p>全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它，否则跳过此步：<code>npm uninstall vue-cli -g</code></p>
<h3 id="1-安装"><a href="#1-安装" class="headerlink" title="1.安装"></a>1.安装</h3><pre><code>$ npm install @vue/cli -g</code></pre><h3 id="2-创建项目"><a href="#2-创建项目" class="headerlink" title="2.创建项目"></a>2.创建项目</h3><pre><code>$ vue create 项目名</code></pre><h3 id="3-运行"><a href="#3-运行" class="headerlink" title="3.运行"></a>3.运行</h3><pre><code>$ npm run serve</code></pre><h3 id="4-打包"><a href="#4-打包" class="headerlink" title="4.打包"></a>4.打包</h3><pre><code>$ npm run build</code></pre><p>注：3.0版本打包后的文件存在路径引用问题，需在vue.config.js添加如下代码</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports =&#123;</span><br><span class="line">    publicPath :process.env.NODE_ENV === <span class="string">'production'</span></span><br><span class="line">    ?<span class="string">'./'</span>:<span class="string">'/'</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>因为3.0版本不再有build和config了， 想要配置的话，需要在项目 根目录 下创建vue.config.js文件，语法与webpack.config.js 稍有不同。<br>语法如下：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line"> <span class="comment">// 基本路径</span></span><br><span class="line"> publicPath: <span class="string">'/'</span>,</span><br><span class="line"> <span class="comment">// 输出文件目录</span></span><br><span class="line"> outputDir: <span class="string">'dist'</span>,</span><br><span class="line"> <span class="comment">// eslint-loader 是否在保存的时候检查</span></span><br><span class="line"> lintOnSave: <span class="literal">true</span>,</span><br><span class="line"> <span class="comment">// use the full build with in-browser compiler?</span></span><br><span class="line"> <span class="comment">// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only</span></span><br><span class="line"> compiler: <span class="literal">false</span>,</span><br><span class="line"> <span class="comment">// webpack配置</span></span><br><span class="line"> <span class="comment">// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md</span></span><br><span class="line"> chainWebpack: <span class="function"><span class="params">()</span> =&gt;</span> &#123;&#125;,</span><br><span class="line"> configureWebpack: <span class="function"><span class="params">()</span> =&gt;</span> &#123;&#125;,</span><br><span class="line"> <span class="comment">// vue-loader 配置项</span></span><br><span class="line"> <span class="comment">// https://vue-loader.vuejs.org/en/options.html</span></span><br><span class="line"> vueLoader: &#123;&#125;,</span><br><span class="line"> <span class="comment">// 生产环境是否生成 sourceMap 文件</span></span><br><span class="line"> productionSourceMap: <span class="literal">true</span>,</span><br><span class="line"> <span class="comment">// css相关配置</span></span><br><span class="line"> css: &#123;</span><br><span class="line">  <span class="comment">// 是否使用css分离插件 ExtractTextPlugin</span></span><br><span class="line">  extract: <span class="literal">true</span>,</span><br><span class="line">  <span class="comment">// 开启 CSS source maps?</span></span><br><span class="line">  sourceMap: <span class="literal">false</span>,</span><br><span class="line">  <span class="comment">// css预设器配置项</span></span><br><span class="line">  loaderOptions: &#123;&#125;,</span><br><span class="line">  <span class="comment">// 启用 CSS modules for all css / pre-processor files.</span></span><br><span class="line">  modules: <span class="literal">false</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="comment">// use thread-loader for babel &amp; TS in production build</span></span><br><span class="line"> <span class="comment">// enabled by default if the machine has more than 1 cores</span></span><br><span class="line"> parallel: <span class="built_in">require</span>(<span class="string">'os'</span>).cpus().length &gt; <span class="number">1</span>,</span><br><span class="line"> <span class="comment">// 是否启用dll</span></span><br><span class="line"> <span class="comment">// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode</span></span><br><span class="line"> dll: <span class="literal">false</span>,</span><br><span class="line"> <span class="comment">// PWA 插件相关配置</span></span><br><span class="line"> <span class="comment">// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa</span></span><br><span class="line"> pwa: &#123;&#125;,</span><br><span class="line"> <span class="comment">// webpack-dev-server 相关配置</span></span><br><span class="line"> devServer: &#123;</span><br><span class="line">  open: process.platform === <span class="string">'darwin'</span>,</span><br><span class="line">  host: <span class="string">'0.0.0.0'</span>,</span><br><span class="line">  port: <span class="number">8080</span>,</span><br><span class="line">  https: <span class="literal">false</span>,</span><br><span class="line">  hotOnly: <span class="literal">false</span>,</span><br><span class="line">  proxy: <span class="literal">null</span>, <span class="comment">// 设置代理</span></span><br><span class="line">  before: <span class="function"><span class="params">app</span> =&gt;</span> &#123;&#125;</span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="comment">// 第三方插件配置</span></span><br><span class="line"> pluginOptions: &#123;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>如有引入样式框架库在打包后出现样式失效的情况，将打包后的index页面中的css引入顺序更改下即可<br>例如将&lt;link href=css/app.d4c96c83.css rel=stylesheet&gt;放到最前面</p>
<h2 id="vue-cli-2-0版本"><a href="#vue-cli-2-0版本" class="headerlink" title="vue-cli 2.0版本"></a><strong>vue-cli 2.0版本</strong></h2><h3 id="1-安装-1"><a href="#1-安装-1" class="headerlink" title="1.安装"></a>1.安装</h3><pre><code>$ npm i vue-cli -g</code></pre><h3 id="2-创建项目-1"><a href="#2-创建项目-1" class="headerlink" title="2.创建项目"></a>2.创建项目</h3><pre><code>$ vue init webpack 项目名</code></pre><h3 id="3-运行-1"><a href="#3-运行-1" class="headerlink" title="3.运行"></a>3.运行</h3><pre><code>$ npm run dev</code></pre><h3 id="4-打包-1"><a href="#4-打包-1" class="headerlink" title="4.打包"></a>4.打包</h3><pre><code>$ npm run build</code></pre><h2 id="rimraf删除工具"><a href="#rimraf删除工具" class="headerlink" title="rimraf删除工具"></a><strong>rimraf删除工具</strong></h2><p>功能：用于快速删除node_modules文件</p>
<h3 id="1-全局安装"><a href="#1-全局安装" class="headerlink" title="1.全局安装"></a>1.全局安装</h3><pre><code>$ npm install -g rimraf </code></pre><h3 id="2-快速删除"><a href="#2-快速删除" class="headerlink" title="2.快速删除"></a>2.快速删除</h3><pre><code>$ rimraf node_modules</code></pre><p>( 注：可以用cd指定目录位置，也可在目录位置shift+右键打开powershell，这也是cmd控制台)</p>
<h2 id="关于dependencies-和-devDependencies的区别"><a href="#关于dependencies-和-devDependencies的区别" class="headerlink" title="关于dependencies 和 devDependencies的区别"></a><strong>关于dependencies 和 devDependencies的区别</strong></h2><p>1.存在dependencies 中的，是在生产环境中要用到的，比如项目插件element ui、mint ui、echarts是在项目运行中需要使用的，所以用 -S<br>2.存在devDependencies中的，是在开发环境中要用到的，比如构建工具glup、webpack等，是用来压缩代码和打包的工具，程序实际运行的时候并不需要，所以要用 -D</p>

    </div>
    
    <div class="post-footer">
        <div>
            
            转载声明：
            商业转载请联系作者获得授权,非商业转载请注明出处 © <a href="" target="_blank">Snippet</a>
            
            
        </div>
        <div>
            
        </div>
    </div>
</article>
<div class="article-nav prev-next-wrap clearfix">
    
    <a href="/blog/2019/09/27/利用keep-alive实现vue页面返回记住滚动条上次浏览位置/" class="pre-post btn btn-default" title='利用 keep-alive 实现vue页面返回记住滚动条上次浏览位置'>
        <i class="fa fa-angle-left fa-fw"></i><span class="hidden-lg">上一篇</span>
        <span class="hidden-xs">
            利用 keep-alive 实现vue页面返回记住滚动条上次浏览位置</span>
    </a>
    
    
    <a href="/blog/2019/09/22/手机端预览项目和调试/" class="next-post btn btn-default" title='手机端预览项目和调试'>
        <span class="hidden-lg">下一篇</span>
        <span class="hidden-xs">
            手机端预览项目和调试</span><i class="fa fa-angle-right fa-fw"></i>
    </a>
    
</div>

                </main>
                
                    <aside id="article-toc" role="navigation" class="col-md-4">
    <div class="widget">
        <h3 class="title">
            文章目录
        </h3>
        
        <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#vue-cli-3-0版本"><span class="toc-text">vue-cli 3.0版本</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-安装"><span class="toc-text">1.安装</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-创建项目"><span class="toc-text">2.创建项目</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-运行"><span class="toc-text">3.运行</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-打包"><span class="toc-text">4.打包</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue-cli-2-0版本"><span class="toc-text">vue-cli 2.0版本</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-安装-1"><span class="toc-text">1.安装</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-创建项目-1"><span class="toc-text">2.创建项目</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-运行-1"><span class="toc-text">3.运行</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-打包-1"><span class="toc-text">4.打包</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#rimraf删除工具"><span class="toc-text">rimraf删除工具</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-全局安装"><span class="toc-text">1.全局安装</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-快速删除"><span class="toc-text">2.快速删除</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#关于dependencies-和-devDependencies的区别"><span class="toc-text">关于dependencies 和 devDependencies的区别</span></a></li></ol>
        
    </div>
</aside>
                
            </div>
        </div>
    </section>
    <footer class="main-footer">
    <div class="container">
        <div class="row">
        </div>
    </div>
</footer>
<a id="back-to-top" class="icon-btn hide">
    <i class="fa fa-chevron-up"></i>
</a>
    <div class="copyright">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="busuanzi">
    
</div>
            </div>
            <div class="col-sm-12">
                <span>Copyright &copy;
                    2017
                </span> |
                <span>
                    Powered by <a href="//hexo.io" class="copyright-links" target="_blank" rel="nofollow">Hexo</a>
                </span> |
                <span>
                    Theme by <a href="//github.com/shenliyang/hexo-theme-snippet.git" class="copyright-links" target="_blank" rel="nofollow">Snippet</a>
                </span>
            </div>
        </div>
    </div>
</div>



<script src="/blog/js/app.js?rev=@@hash"></script>
</body>
</html>